<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 25 24"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path data-follow-fill="currentColor" d="M4.1 6.221v5.794c0 4.162 2.726 7.372 8.408 9.673 5.674-2.196 8.392-5.4 8.392-9.673V6.221l-8.4-3.85-8.4 3.85ZM12.5 0 23 4.813v7.202c0 5.398-3.465 9.369-10.144 11.85l-.364.135-.363-.142C5.46 21.26 2 17.296 2 12.016V4.813L12.5 0Z" :fill="_fill"/><path data-follow-fill="currentColor" d="M16.204 13.832c0 .533-.133 1.035-.4 1.504-.256.47-.64.864-1.152 1.184-.501.32-1.099.512-1.792.576v1.296h-1.04v-1.296c-1.003-.096-1.813-.41-2.432-.944-.619-.533-.928-1.237-.928-2.112h1.952c.032.416.165.763.4 1.04.235.267.57.437 1.008.512v-3.52a13.887 13.887 0 0 1-1.744-.544 2.92 2.92 0 0 1-1.152-.896c-.31-.405-.464-.96-.464-1.664 0-.885.31-1.616.928-2.192.619-.587 1.43-.928 2.432-1.024V4.456h1.04v1.296c.939.085 1.69.384 2.256.896.576.501.901 1.195.976 2.08H14.14a1.531 1.531 0 0 0-.384-.88 1.68 1.68 0 0 0-.896-.544v3.456c.715.17 1.296.352 1.744.544.448.181.827.475 1.136.88.31.395.464.944.464 1.648Zm-5.888-4.96c0 .437.128.779.384 1.024.267.245.64.443 1.12.592V7.256c-.459.053-.827.219-1.104.496-.267.277-.4.65-.4 1.12Zm2.544 6.72c.47-.075.837-.261 1.104-.56.267-.31.4-.677.4-1.104 0-.427-.133-.757-.4-.992-.256-.245-.624-.443-1.104-.592v3.248Z" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Sox extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
